<template>
  <div class="my-case-detail" v-if="caseInfo">
    <div class="inner">
      <Scroll class="my-case-detail-scroll" :data="caseInfo">
        <div>
          <case-detail-cmp :caseInfo="caseInfo" />
        </div>
      </Scroll>
      <div class="btn">
        <button class="del" @click="delClick">删 除</button>
        <button
          class="edit"
          @click="$router.push({path: '/my/my-homepage/case-detail/release', query: {id: $route.query.id}})"
        >编 辑</button>
      </div>
    </div>
    <transition name="slide">
      <router-view @success="handleSuccess"></router-view>
    </transition>
  </div>
</template>
<script>
import CaseDetailCmp from '@/components/case-detail-cmp/case-detail-cmp'
import Scroll from '@/components/scroll/scroll'
import { getDesignerCaseDetail } from '@/api/home'
import { delCaseItem } from '@/api/my'
const ERR_OK = 200
export default {
  components: {
    CaseDetailCmp,
    Scroll
  },
  data () {
    return {
      caseInfo: null
    }
  },
  created () {
    if (this.$route.query.id) {
      this._getDesignerCaseDetail(this.$route.query.id)
    }
  },
  beforeRouteLeave (to, from, next) {
    // ...
    next(vm => {

    })
  },
  methods: {
    handleSuccess () {
      if (this.$route.query.id) {
        this._getDesignerCaseDetail(this.$route.query.id)
      }
    },
    delClick () {
      this._delCaseItem(this.$route.query.id).then(() => {
        this.$router.replace('/my/my-homepage')
        this.$emit('success')
      })
    },
    _getDesignerCaseDetail (id) {
      getDesignerCaseDetail(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.caseInfo = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _delCaseItem (id) {
      return delCaseItem(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.$toast('删除成功~')
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
@include slideEnter();
.my-case-detail {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 9;
  touch-action: none;
  .inner {
    width: 100%;
    height: 100%;
    padding-bottom: 1rem;
    box-sizing: border-box;
  }
  .my-case-detail-scroll {
    width: 100%;
    height: 100%;
  }
  .btn {
    width: 100%;
    height: 0.86rem;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    button {
      width: 50%;
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(5, 2, 1, 1);
      line-height: 0.86rem;
      text-align: center;
      border: none;
      outline: none;
    }
    .del {
      background: #e9e9e9;
      color: rgba(5, 2, 1, 1);
    }
    .edit {
      background: #050201;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
